<template>
    <div>
        <div class="BasicDetail">
            <div class="flex" style="justify-content: space-between;">
                <div>
                    {{ $t('text.House.l7') }}
                </div>

                <el-button round style="height: 28px;width: 80px;color: #6698ff;border: 1px solid #6698ff;"
                    @click="editHouse">{{ $t('text.House.l14') }}</el-button>

            </div>
            <div class="flex2">
                <div class="ndsItem">
                    <div>{{ $t('text.House.l211') }}</div>
                    <div>
                        {{ (baseList.lowerPrice == null ? '-' : String(baseList.lowerPrice).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
                            + ' - ') }}
                        {{ (baseList.upperPrice == null ? '-' : String(baseList.upperPrice).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
                            + ' AED ') }}
                    </div>
                </div>
                <div class="ndsItem">
                    <div>{{ $t('text.House.l212') }}</div>
                    <div>
                        {{ baseList.lowerArea == null ? '-' : baseList.lowerArea }}-
                        {{ baseList.upperArea == null ? '-' : baseList.upperArea }}m²
                    </div>
                </div>
                <div class="ndsItem">
                    <div>{{ $t('text.House.l213') }}</div>
                    <div>{{ baseList.unitType == null ? '-' : baseList.unitType }}</div>
                </div>
                <div class="ndsItem">
                    <div>{{ $t('text.House.l214') }}</div>
                    <div>{{ baseList.decorationLevel == null ? '-' : baseList.decorationLevel }}</div>
                </div>
                <div class="ndsItem">
                    <div>{{ $t('text.House.l215') }}</div>
                    <div v-if="baseList.type!==null&&baseList.type!==''">
                        <span v-for="item in baseList.type.split(',')" :key="item" style="padding-right: 10px;">
                            {{ item == '0' ? $t('text.House.l187') :""}}
                            {{ item == '1' ? $t('text.House.l188') :""}}
                            {{ item == '2' ? $t('text.House.l189') :""}}
                            {{ item == '3' ? $t('text.House.l190') :""}}
                            {{ item == '4' ? $t('text.House.l191') :""}}
                        </span>
                    </div>
                    <div v-else>&ensp;</div>
                </div>
                <div class="ndsItem">
                    <div>{{ $t('text.House.l216') }}</div>
                    <div>
                        {{ baseList.ownershipLife == null ? '-' : baseList.ownershipLife }}
                    </div>
                </div>
                <div class="ndsItem">
                    <div>{{ $t('text.House.l217') }}</div>
                    <div>
                        {{ baseList.openTime == null ? '-' : baseList.openTime }}</div>
                </div>
                <div class="ndsItem">
                    <div>{{ $t('text.House.l218') }}</div>
                    <div>{{ baseList.deliverTime == null ? '-' : baseList.deliverTime }}</div>
                </div>

                <div class="ndsItem">
                    <div>{{ $t('text.House.l219') }}</div>
                    <div>{{ baseList.sumFloorArea == null ? '-' : baseList.sumFloorArea + 'm²' }}</div>
                </div>
                <div class="ndsItem">
                    <div>{{ $t('text.House.l220') }}</div>
                    <div>{{ baseList.buildingNumber == null ? '-' : baseList.buildingNumber }}</div>
                </div>
                <div class="ndsItem">
                    <div>{{ $t('text.House.l221') }}</div>
                    <div>{{ baseList.householdsNumber == null ? '-' : baseList.householdsNumber }}</div>
                </div>
                <div class="ndsItem">
                    <div>{{ $t('text.House.l222') }}</div>
                    <div>{{ baseList.propertyGrade == null ? '-' : baseList.propertyGrade }}</div>
                </div>

                <div class="ndsItem">
                    <div>{{ $t('text.House.l223') }}</div>
                    <div>{{ baseList.volumeRate == null ? '-' : baseList.volumeRate + '%' }}</div>
                </div>
                <div class="ndsItem">
                    <div>{{ $t('text.House.l224') }}</div>
                    <div>{{ baseList.greeningRate == null ? '-' : baseList.greeningRate + '%' }}
                    </div>
                </div>
                <div class="ndsItem">
                    <div>{{ $t('text.House.l225') }}</div>
                    <div>{{ baseList.developerBrand == null ? '-' : baseList.developerBrand }}
                    </div>
                </div>
                <div class="ndsItem">
                    <div>{{ $t('text.House.l226') }}</div>
                    <div>{{ baseList.developerName == null ? '-' : baseList.developerName }}
                    </div>
                </div>

                <div class="ndsItem">
                    <div>{{ $t('text.House.l227') }}</div>
                    <div>{{ baseList.propertyName == null ? '-' : baseList.propertyName }}
                    </div>
                </div>
                <div class="ndsItem">
                    <div>{{ $t('text.House.l228') }}</div>
                    <div>{{ baseList.propertyGrade == null ? '-' : baseList.propertyGrade }}
                    </div>
                </div>
                <div class="ndsItem">
                    <div>{{ $t('text.House.l229') }}</div>
                    <div>{{ baseList.propertyFee == null ? '-' : baseList.propertyFee }}
                    </div>
                </div>
            </div>
        </div>
        <!--楼盘动态-->
        <div class="BasicDetail">
            <div class="flex" style="justify-content: space-between;">
                <div>
                    {{ $t('text.House.l233') }}
                </div>
                <DialogLayout45 @returnData="setHouseTrends">
                    <el-button round style="height: 28px;width: 80px;color: #6698ff;border: 1px solid #6698ff;">{{
                        $t('text.House.l307') }}</el-button>
                </DialogLayout45>
            </div>
            <div class="lpp" v-if="houseTrends.length > 0">
                <div v-if="cardPage != 1">
                    <img src="../../assets/images/lrow.svg" class="rowImg" @click="cardPage = cardPage - 1">
                </div>
                <div class="lp1" v-for="item in houseTrends" v-bind:key="item">
                    <div class="lp2">
                        <div class="lp3">
                            <span class="lp4"
                                :style="{ background: item.type == '样板间' ? '#429df8' : item.type == '开盘' ? '#f9cd90' : item.type == '交房' ? '#ec808d' : '#02bfbf' }">
                                {{ item.type == null ? '-' : item.type }}
                            </span>
                            <CommonOmit :text="item.title == null ? '-' : item.title" :length="1"></CommonOmit>
                        </div>
                        <div class="lp5">{{ item.createTime == null ? '-' : item.createTime }}</div>
                    </div>
                    <div class="lp6">
                        <div class="lp7">
                            <div class="lp8">
                                <CommonOmit :text="item.content == null ? '-' : item.content" :length="5"></CommonOmit>
                            </div>
                            <div class="lp9">{{ $t('text.House.l308') }}</div>
                        </div>
                        <div class="lp10" v-if="item.picAddress != null">
                            <CommonImage :src="item.picAddress == null ? '' : item.picAddress.split(',')[0]" class="lp10" />
                            <div class="lp11" v-if="item.picAddress.split(',').length > 1">
                                {{ "+" + item.picAddress.split(',').length }}</div>
                        </div>
                    </div>
                </div>
                <div class="lp1Em" v-for="item of 3 - houseTrends.length" v-bind:key="item"></div>
                <div v-if="houseTrends.length % 3 == 0 && houseTrends.length != 0">
                    <img src="../../assets/images/rrow.svg" class="rowImg" @click="cardPage = cardPage + 1">
                </div>
            </div>
            <div v-else style="text-align: center;padding: 10px;width: inherit;color: #a6a6a6;font-size: 15px;">{{
                $t("text.Common.l23") }}</div>
        </div>
        <!--获客官网-->
        <div class="BasicDetail">
            <div class="flex" style="justify-content: space-between;">
                <div>
                    {{ $t('text.House.l8') }}
                </div>
                <DialogLayout7 :officialList="officialList" @returnData="setOfficialList" isNewHouse>
                    <el-button round style="height: 28px;width: 80px;color: #6698ff;border: 1px solid #6698ff;">{{
                        $t('text.House.l14') }}</el-button>
                </DialogLayout7>
            </div>
            <div class="flexc2">
                <div class="tt1">{{ $t('text.House.l231') }}</div>
                <div class="tt2">{{ officialList.houseTitle == null ? '-' : officialList.houseTitle }}
                </div>
                <div class="tt1">{{ $t('text.House.l232') }}</div>
                <div class="tt2">{{ officialList.depict == null ? '-' : officialList.depict }}</div>
            </div>
        </div>


        <!--地图-->
        <div class="BasicDetail">
            <div class="flex" style="justify-content: space-between;">
                <div>
                    {{ $t('text.House.l234') }}
                </div>
            </div>
            <div class="flexc2">
                <div id="panel"></div>
                <div class="map">
                    <div id="gaode-map" class="map" style="width: 100%;height: 100%;"></div>
                    <div class="mapList">
                        <div class="mapTab">
                            <span class="tab" @click="setTab(item)" v-for="(item, index) in tabList"
                                :class="item.name == tabName && index == 0 ? 'blueBag1' : item.name == tabName && index == 5 ? 'blueBag2' : item.name == tabName && index != 0 && index != 5 ? 'blueBag3' : ''"
                                v-bind:key="item">{{ item.name }}</span>
                        </div>
                        <div class="ml1" v-if="mapType">
                            <div class="ml2" v-for="item in mapSearchLists.pois" v-bind:key="item">
                                <img class="ml3"
                                    :src="item.photos == '' ? require('../../assets/images/nullPic.svg') : item.photos[0].url">
                                <div class="ml4">
                                    <div class="ml5">
                                        <div class="ml7">{{ item.name }}</div>
                                        <div class="ml8">{{ item.distance }}米</div>
                                    </div>
                                    <div class="ml6">{{ $t("text.Neighbourhoods.l87") }}{{ item.address }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="ml1" v-if="!mapType">
                            <div class="ml2" v-for="item in mapKitSearchLists" v-bind:key="item">
                                <img class="ml3" :src="require('../../assets/images/nullPic.svg')">
                                <div class="ml4">
                                    <div class="ml5">
                                        <div class="ml7">{{ item.name }}</div>
                                        <div class="ml8">{{ getDistance(item.coordinate.latitude, item.coordinate.longitude)
                                        }}米</div>
                                    </div>
                                    <div class="ml6">{{ $t("text.Neighbourhoods.l87") }}{{ item.fullThoroughfare }}</div>
                                </div>
                            </div>
                        </div>
                        <el-pagination :page-size="10" :pager-count="5" layout="prev, pager, next"
                            v-model:current-page="mapSearchPage" :total="mapSearchLists.count" />
                    </div>
                </div>
            </div>
        </div>


    </div>
</template>
    
<script>
import DialogLayout45 from '@/components/dialogLayout/DialogLayout45.vue';
import { findByNewHouseId, trendsGetByNewId } from '../../http/api'
import AMapLoader from "@amap/amap-jsapi-loader";
import CommonImage from '@/components/input/CommonImage.vue';
import DialogLayout7 from '@/components/dialogLayout/DialogLayout7.vue';
window._AMapSecurityConfig = {
    securityJsCode: '2a6bb59a16f7402a63e0adedbcf74fa9',
}
import mapkit from "mapkit.js";

let map = null
let throttleTimer = null
export default {
    name: 'CustomBasicDetail',
    props: {
        baseList: { defatlt: {} }
    },
    components: {
        DialogLayout45,
        CommonImage,
        DialogLayout7
    },
    data() {
        return {
            map: null,
            mapSearchLists: { count: 0 },
            mapKitSearchLists: [],
            mapSearchPage: 1,
            mapSearchRange: 1000,
            AMaps: null,
            mapType: localStorage.getItem('mapType') == 'mapkit' ? false : true,
            tabList: [
                { name: this.$t('text.Neighbourhoods.l88'), type: '交通设施服务', mapkitType: 1 },
                { name: this.$t('text.Neighbourhoods.l89'), type: '科教文化服务', mapkitType: 2 },
                { name: this.$t('text.Neighbourhoods.l90'), type: '医疗保健服务', mapkitType: 3 },
                { name: this.$t('text.Neighbourhoods.l91'), type: '购物服务', mapkitType: 4 },
                { name: this.$t('text.Neighbourhoods.l92'), type: '生活服务', mapkitType: 5 },
                { name: this.$t('text.Neighbourhoods.l93'), type: '体育休闲服务', mapkitType: 6 }
            ],
            tabType: '交通设施服务',
            tabName: this.$t('text.Neighbourhoods.l88'),
            mapkitType: 1,
            officialList: {},
            houseTrends: [],
            cardPage: 1,
            coordinateSpan: [0.03, 0.03],
        }
    },
    mounted() {
        findByNewHouseId({ newHouseId: this.$route.query.id }).then(res => {
            if (res !== undefined && res != null) {
                this.officialList = res
                console.log(res)
            }
        }).catch()
        this.getCard()


        if (localStorage.getItem("mapType") == 'mapkit') {
            this.handleInitMap()
        } else {
            this.initMap()
        }
    },
    methods: {

        getCard() {
            trendsGetByNewId({ newId: this.$route.query.id, pageNo: this.cardPage, pageSize: 3 }).then(res => {
                if (res !== undefined && res != null) {
                    this.houseTrends = res.dataList
                    console.log(res)
                }
            }).catch()
        },

        editHouse() {
            localStorage.setItem("addNewHouse", JSON.stringify(this.baseList))
            this.$router.push({ path: '/addNewHouse', query: { edit: true } })
        },
        setHouseTrends(params) {
            this.houseTrends.unshift(JSON.parse(JSON.stringify(params))) // 将 params 放入数组的第一个位置
            if (this.houseTrends.length > 3) {
                this.houseTrends.length = 3; // 如果数组长度超过3，截取前三个数据
            }
        },
        setOfficialList(params) {
            this.officialList = params
        },
        initMap() {
            AMapLoader.load({
                "key": "eca101bb1aabf80a81f81b7622ba8829",
                "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                "plugins": ["AMap.Scale", "AMap.ToolBar", "AMap.AutoComplete", "AMap.PlaceSearch", "AMap.ControlBar", "AMap.MouseTool"],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap) => {
                this.AMaps = AMap
                this.map = new AMap.Map('gaode-map', {
                    viewMode: "2D",  //  是否为3D地图模式
                    zoom: 16,   // 初始化地图级别
                    center: [113.40853, 23.17504], //中心点坐标
                    resizeEnable: true
                });
                this.map.addControl(new AMap.Scale());   // 添加左下角的比例尺
                let toolBar = new AMap.ToolBar({
                    position: {
                        bottom: '210px',
                        right: '35px'
                    }
                });
                let controlBar = new AMap.ControlBar({
                    position: {
                        bottom: '280px',
                        right: '10px',
                    },
                });
                this.map.addControl(toolBar);   // 添加右下角的放大缩小
                this.map.addControl(controlBar);   // 方向盘
                this.getMapSearch(AMap)

            }).catch(e => {
                console.log(e);
            });
        },

        getMapSearch(AMap) {
            if (this.map) {
                this.map.clearMap();
            }
            var placeSearch = new AMap.PlaceSearch({
                type: this.tabType, // 兴趣点类别
                pageSize: 10, // 单页显示结果条数
                pageIndex: this.mapSearchPage, // 页码
                //city: "广州", // 兴趣点城市
                citylimit: true,  //是否强制限制在设置的城市内搜索
                map: this.map, // 展现结果的地图实例
                // panel: "panel", // 结果列表将在此容器中进行展示。
                autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
            });
            let lon = null
            let lat = null
            if (this.baseList.mapCoordinates != null && this.baseList.mapCoordinates.split(",").length == 2) {
                lon = Number(this.baseList.mapCoordinates.split(",")[0])
                lat = Number(this.baseList.mapCoordinates.split(",")[1])
            }
            var cpoint = [lon, lat]; //中心点坐标
            placeSearch.searchNearBy('', cpoint, this.mapSearchRange, (status, result) => {
                if (status == 'complete') {
                    this.mapSearchLists = result.poiList
                }
                console.log(status, result)
            });

            var markerContent =
                `<div class="custom-callout">${this.$t("text.Common.l20")}</div>`
            var marker = new AMap.Marker({
                position: new AMap.LngLat(lon, lat),
                // 将 html 传给 content
                content: markerContent,
            });
            // 将 markers 添加到地图
            this.map.add(marker);

        },
        setTab(item) {
            this.tabName = item.name
            this.tabType = item.type
            this.mapkitType = item.mapkitType
        },
        handleInitMap() {
            //请求拿token，进行地图token校验
            const jwt = "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IlgyWlJWRzMyRDUifQ.eyJpc3MiOiJIMzdSWjc3V0Q0IiwiaWF0IjoxNjkzODQzMjAwLCJleHAiOjE3MDE3MDU2MDB9.kUwtcw8aCJy50FyNoZ0otwnnlcUbR_qe4QWVSO6QcJwu5rnnBb1-hgpqXhW4cxokWd8UIYhqsBaNUNfxEyZ5Bg";
            mapkit.init({
                authorizationCallback: done => {
                    done(jwt);
                }
            });
            //监听地图token验证成功，去加载地图
            window.addEventListener('mapkitloaded', this.initMapkit());
        },
        initMapkit() {
            console.log("苹果地图开始加载")
            //设置地图默认中心
            let loadMap = new mapkit.Map("gaode-map")

            let lon = null
            let lat = null
            if (this.baseList.mapCoordinates != null && this.baseList.mapCoordinates.split(",").length == 2) {
                lon = Number(this.baseList.mapCoordinates.split(",")[0])
                lat = Number(this.baseList.mapCoordinates.split(",")[1])

                //创建图层DOM
                var factory = () => {
                    const customCallout = document.createElement("div");
                    customCallout.className = "custom-callout";
                    customCallout.textContent = this.$t("text.Common.l20")
                    return customCallout;
                };
                //定位
                const cupertino = new mapkit.CoordinateRegion(
                    new mapkit.Coordinate(lat, lon),
                    new mapkit.CoordinateSpan(this.coordinateSpan[0], this.coordinateSpan[1])
                );
                loadMap.region = cupertino;

                var myData = [
                    {
                        data: {
                            coordinate: new mapkit.Coordinate(lat, lon)
                        }
                    }
                ];
                //循环添加，标注到地图上
                myData.forEach((data) => {
                    var annotation = new mapkit.Annotation(data.data.coordinate, factory, data);
                    annotation.draggable = false;

                    loadMap.addAnnotation(annotation);
                });
                this.getMapkitPio()

            }
            map = loadMap
        },
        getMapkitPio() {
            let lon = null
            let lat = null
            if (this.baseList.mapCoordinates != null && this.baseList.mapCoordinates.split(",").length == 2) {
                lon = Number(this.baseList.mapCoordinates.split(",")[0])
                lat = Number(this.baseList.mapCoordinates.split(",")[1])

                let PointOfInterestCategory = [mapkit.PointOfInterestCategory.PublicTransport]
                switch (this.mapkitType) {
                    case 1:
                        PointOfInterestCategory = [mapkit.PointOfInterestCategory.PublicTransport, mapkit.PointOfInterestCategory.Parking, mapkit.PointOfInterestCategory.Airport]
                        break;
                    case 2:
                        PointOfInterestCategory = [mapkit.PointOfInterestCategory.Stadium, mapkit.PointOfInterestCategory.University]
                        break;
                    case 3:
                        PointOfInterestCategory = [mapkit.PointOfInterestCategory.Pharmacy, mapkit.PointOfInterestCategory.Hospital]
                        break;
                    case 4:
                        PointOfInterestCategory = [mapkit.PointOfInterestCategory.FoodMarket, mapkit.PointOfInterestCategory.Store]
                        break;
                    case 5:
                        PointOfInterestCategory = [mapkit.PointOfInterestCategory.Campground, mapkit.PointOfInterestCategory.FitnessCenter, mapkit.PointOfInterestCategory.MovieTheater, mapkit.PointOfInterestCategory.Museum, mapkit.PointOfInterestCategory.NationalPark]
                        break;
                    case 6:
                        PointOfInterestCategory = [mapkit.PointOfInterestCategory.Zoo, mapkit.PointOfInterestCategory.Theater, mapkit.PointOfInterestCategory.Restaurant, mapkit.PointOfInterestCategory.PostOffice, mapkit.PointOfInterestCategory.Nightlife, mapkit.PointOfInterestCategory.Cafe, mapkit.PointOfInterestCategory.Bank]
                        break;
                }

                let Points = new mapkit.PointsOfInterestSearch({
                    language: localStorage.getItem("language") == null ? 'zh-Hans' : localStorage.getItem("language") == 'zh' ? 'zh-Hans' : 'en-GB',
                    region: new mapkit.CoordinateRegion(
                        new mapkit.Coordinate(lat, lon),
                        // new mapkit.Coordinate(25.24877166748047, 55.360836),
                        new mapkit.CoordinateSpan(this.coordinateSpan[0], this.coordinateSpan[1])
                    ),
                    pointOfInterestFilter: new mapkit.PointOfInterestFilter.including(PointOfInterestCategory)
                })
                Points.search((error, res) => {
                    if (res && res.places) {
                        this.mapSearchLists.count = res.places.length
                        this.mapKitSearchLists = res.places
                        console.log(this.mapSearchLists)
                    }
                })
            }
        },

        //计算经纬度距离
        getDistance(lat2, lon2) {
            let lon = null
            let lat = null
            if (this.baseList.mapCoordinates != null && this.baseList.mapCoordinates.split(",").length == 2) {
                lon = Number(this.baseList.mapCoordinates.split(",")[0])
                lat = Number(this.baseList.mapCoordinates.split(",")[1])
                const R = 6371.393; // 地球平均半径,单位km
                const radLat1 = lat * Math.PI / 180;
                const radLon1 = lon * Math.PI / 180;

                const radLat2 = lat2 * Math.PI / 180;
                const radLon2 = lon2 * Math.PI / 180;

                const dLat = radLat2 - radLat1;
                const dLon = radLon2 - radLon1;

                const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
                    Math.cos(radLat1) * Math.cos(radLat2) *
                    Math.sin(dLon / 2) * Math.sin(dLon / 2);

                const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));

                let d = R * c; // 单位公里

                d *= 1000; // 单位换算为米

                return parseInt(d);
            } else {
                return 'error -1'
            }
        },

        //监听鼠标滚动
        handleWheel(event) {
            if (!throttleTimer && localStorage.getItem("mapType") == 'mapkit') {
                if (event.deltaY > 0) {
                    // 重新设置视野，放大地图
                    const currentCenter = map.region.center;
                    this.coordinateSpan = [this.coordinateSpan[0] * 2, this.coordinateSpan[1] * 2]
                    const region = new mapkit.CoordinateRegion(
                        new mapkit.Coordinate(currentCenter.latitude, currentCenter.longitude),
                        new mapkit.CoordinateSpan(this.coordinateSpan[0], this.coordinateSpan[1])
                    );
                    map.region = region;

                } else {
                    // 重新设置视野，缩小地图
                    const currentCenter = map.region.center;
                    this.coordinateSpan = [this.coordinateSpan[0] / 2, this.coordinateSpan[1] / 2]
                    const region = new mapkit.CoordinateRegion(
                        new mapkit.Coordinate(currentCenter.latitude, currentCenter.longitude),
                        new mapkit.CoordinateSpan(this.coordinateSpan[0], this.coordinateSpan[1])
                    );
                    map.region = region;
                }
                throttleTimer = setTimeout(() => {
                    clearTimeout(throttleTimer);
                    throttleTimer = null
                }, 1000);
            }
        },

    },
    watch: {
        mapSearchPage: {
            handler() {
                if (this.AMaps != null) {
                    this.getMapSearch(this.AMaps)
                }
            }
        },
        tabType: {
            handler() {
                if (this.AMaps != null) {
                    this.getMapSearch(this.AMaps)
                }
            }
        },
        mapkitType: {
            handler() {
                if (map != null && localStorage.getItem("mapType") == 'mapkit') {
                    this.getMapkitPio()
                }
            }
        },
        cardPage() {
            this.getCard()
        }
    },

    computed: {

    }

}
</script>
<style>
.rowImg {
    width: 25px;
    height: 25px;
}


.lpp {
    display: flex;
    font-size: 12px;
    gap: 20px;
    padding-top: 15px;
    padding-left: 35px;
    padding-right: 35px;
    align-items: baseline;
}

.lp1 {
    display: flex;
    flex: 1;
    flex-direction: column;
    border-radius: 6px;
    padding: 10px;
    gap: 15px;
    background: #f2f2f2;
    min-height: 156px;
}

.lp1Em {
    display: flex;
    flex: 1;
    flex-direction: column;
    border-radius: 6px;
    padding: 10px;
    gap: 15px;
}

.lp2 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.lp3 {
    word-break: break-all;
    display: flex;
    align-items: center;
}

.lp4 {
    background: #ec808d;
    color: white;
    padding: 2px 5px;
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap;
}
.lp5{
    white-space: nowrap;
}
.lp6 {
    display: flex;
    gap: 15px;
    flex: 1;
}

.lp7 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
}

.lp8 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
    word-break: break-all;
}


.lp10 {
    width: 100px;
    height: 70px;
    border-radius: 3px;
    position: relative;
}

.lp11 {
    position: absolute;
    top: 30px;
    left: 40px;
    color: white;
    font-size: 15px;
    font-weight: 600;
}

.custom-callout {
    background-color: #2f71f7;
    position: relative;
    border-radius: 15px;
    height: 30px;
    display: flex;
    box-shadow: 1px 1px 2px 2px rgb(231 229 229 / 20%);
    align-items: center;
    width: max-content;
    color: white;
    font-size: 13px;
    padding: 0px 10px;
    transform: translateX(-50%) translateY(-100%);
}

.custom-callout::before {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #2f71f7;
}
</style>
<style scoped>
.p1 {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.BasicDetail {
    margin-left: 35px;
    margin-right: 35px;
    display: flex;
    flex-direction: column;
    padding-bottom: 25px;
    border-bottom: 2px solid #eee;
    padding-top: 10px;
}

.flex {
    display: flex;
    align-items: center;
}

.flex2 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.flex3 {
    display: flex;
    align-items: center;
    margin-left: 35px;
    margin-right: 35px;
    overflow-x: auto;
    overflow-y: hidden;
}

.flexc {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flexc2 {
    display: flex;
    flex-direction: column;
    margin-left: 35px;
    margin-right: 35px;
    position: relative;
}

.flexc3 {
    display: flex;
    flex-direction: column;
    margin-left: 15px;
    margin-right: 35px;
}

.t2 {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.t3 {
    font-size: 14px;
    color: rgb(245, 155, 34);
    display: flex;
    align-items: center;
}

.tt1 {
    text-align: left;
    font-size: 13px;
    color: gray;
    padding-top: 10px;
    word-break: break-all;
}

.tt2 {
    text-align: left;
    font-size: 13px;
    color: black;
    padding-top: 10px;
    word-break: break-all;
}

.head {
    width: 40px;
    height: 40px;
}

.map {
    width: 100%;
    height: 800px;
    border: 1px solid #eee;
    border-radius: 10px;
    margin-bottom: 50px;
}

#panel {
    position: absolute;
    background-color: white;
    max-height: 300px;
    overflow-y: auto;
    bottom: 400px;
    right: 10px;
    width: 280px;
    border-bottom: solid 1px silver;
    z-index: 1;
    text-align: left;
    overflow: scroll;
}

.mapList {
    position: absolute;
    right: 20px;
    top: 40px;
    background: white;
    z-index: 12;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 1px 1px 10px 1px #e3e3e3;
}

.mapTab {
    display: flex;
    background: #eee;
    font-size: 14px;
    font-weight: 600;
    width: 100%;
    border-radius: 10px 10px 0px 0;
    height: 32px;
    line-height: 32px;
}

.tab {
    flex: 1;
    padding: 0 4px;
}

.ml1 {
    display: flex;
    flex-direction: column;
    height: 350px;
    overflow: auto;
    width: 300px;
}

.ml2 {
    display: flex;
    text-align: left;
    font-size: 12px;
    width: 300px;
    padding: 5px 5px;
    border-bottom: 1px solid #eee;
}

.ml3 {
    width: 80px;
    height: 45px;
    background: #eee;
    border-radius: 3px;
}

.ml4 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding-left: 5px;
    width: 100%;
    padding-right: 15px;
}

.ml5 {
    display: flex;
    justify-content: space-between;
    color: black;
    font-weight: 600;
}

.ml6 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

.ml7 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

.ml8 {
    white-space: nowrap;
}

.blueBag1 {
    background: #308efa;
    border-radius: 10px 0px 0px 0;
    color: white;
}

.blueBag2 {
    background: #308efa;
    border-radius: 0px 10px 0px 0;
    color: white;
}

.blueBag3 {
    background: #308efa;
    color: white;
}

.ndsItem {
    width: 20%;
    text-align: left;
    margin-left: 35px;
    font-size: 13px;
    padding-top: 10px;
    padding-bottom: 10px;
}
</style>